<!--
 * @Description: POE2通货物价查询首页
 * @Date: 2025-10-10
-->
<template>
  <view class="container">
    <!-- 数据更新日期 -->
    <view class="update-date-section">
      <view class="update-date-card">
        <u-icon name="calendar" size="20" color="#f4c242" />
        <text class="update-date-text">数据更新日期：{{getDateString(new Date())}}</text>
      </view>
    </view>
    <!-- 通货列表：单列布局 -->
    <view class="currency-list-single">
      <view
        class="currency-card"
        v-for="currency in filteredCurrencies"
        :key="currency._id"
        @tap="showCurrencyDetail(currency)"
      >
        <!-- 通货标题行 -->
        <view class="currency-header">
          <image
            class="currency-icon"
            :src="currencyEnumIconUrl[currency._id]"
            mode="aspectFit"
            @error="handleImageError"
          />
          <view class="currency-name">{{ currency.name }}</view>
          <!-- 置顶按钮 -->
          <view class="pin-button" @tap.stop="togglePinCurrency(currency)">
            <u-icon
              :name="currency.isPinned ? 'star-fill' : 'star'"
              size="20"
              :color="currency.isPinned ? '#f4c242' : '#c0c4cc'"
            />
          </view>
        </view>

        <!-- 价格表格 -->
        <view class="price-table">
          <!-- 表头 -->
          <view class="table-header">
            <view class="table-cell">站点</view>
            <view class="table-cell">元/个</view>
            <view class="table-cell">个/元</view>
            <view class="table-cell">趋势</view>
          </view>

          <!-- 数据行1：qiandao站点 -->
          <view class="table-row">
            <view class="table-cell">qiandao</view>
            <view class="table-cell">{{ currency.todayPrice[0].count2yuan }}</view>
            <view class="table-cell">{{ currency.todayPrice[0].yuan2count }}</view>
            <view class="table-cell">
              <view
                class="price-change-tag"
                :class="{
                  up: getPriceChangePercent(currency, 0) < 0,
                  down: getPriceChangePercent(currency, 0) > 0,
                  stable: getPriceChangePercent(currency, 0) === 0
                }"
              >
                <text class="change-icon">
                  {{
                    getPriceChangePercent(currency, 0) > 0
                      ? '📈'
                      : getPriceChangePercent(currency, 0) < 0
                      ? '📉'
                      : '➖'
                  }}
                </text>
                <text class="change-percent">
                  {{ getPriceChangePercent(currency, 0) > 0 ? '+' : ''
                  }}{{ getPriceChangePercent(currency, 0) }}%
                </text>
              </view>
            </view>
          </view>

          <!-- 数据行2：dd373站点 -->
          <view class="table-row">
            <view class="table-cell">dd373</view>
            <view class="table-cell">{{ currency.todayPrice[1].count2yuan.toFixed(2) }}</view>
            <view class="table-cell">{{ formatPrice(currency.todayPrice[1].yuan2count) }}</view>
            <view class="table-cell">
              <view
                class="price-change-tag"
                :class="{
                  up: getPriceChangePercent(currency, 1) > 0,
                  down: getPriceChangePercent(currency, 1) < 0,
                  stable: getPriceChangePercent(currency, 1) === 0
                }"
              >
                <text class="change-icon">
                  {{
                    getPriceChangePercent(currency, 1) > 0
                      ? '📈'
                      : getPriceChangePercent(currency, 1) < 0
                      ? '📉'
                      : '➖'
                  }}
                </text>
                <text class="change-percent">
                  {{ getPriceChangePercent(currency, 1) > 0 ? '+' : ''
                  }}{{ getPriceChangePercent(currency, 1) }}%
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <u-empty v-if="filteredCurrencies.length === 0" text="暂无匹配的通货" />

    <!-- 通货详情弹窗 -->
    <u-popup v-model="showDetailPopup" mode="bottom" height="80%" border-radius="20" closeable>
      <view class="detail-popup" v-if="selectedCurrency">
        <view class="detail-header">
          <image class="detail-icon" :src="currencyEnumIconUrl[selectedCurrency._id]" mode="aspectFit" />
          <view class="detail-info">
            <view class="detail-name">{{ selectedCurrency.name }}</view>
            <view class="detail-id">{{ selectedCurrency._id }}</view>
          </view>
        </view>

        <view class="detail-price">
          <view class="detail-price-main">
            1元 = {{ formatPrice(selectedCurrency.todayPrice[0].yuan2count) }}个
          </view>
          <view class="detail-price-change" :class="getPriceTrend(selectedCurrency, 0)">
            <text v-if="getPriceChangePercent(selectedCurrency, 0) > 0">+</text>
            {{ getPriceChangePercent(selectedCurrency, 0) }}%
          </view>
        </view>

        <!-- 价格趋势图表 -->
        <price-chart v-if="selectedCurrency.history" :currency-data="selectedCurrency" />

        <view class="detail-desc">
          <view class="detail-desc-title">通货说明</view>
          <view class="detail-desc-content">{{ selectedCurrency.description }}</view>
        </view>

        <view class="detail-time">
          更新时间：{{ formatUpdateTime(selectedCurrency.updated_at) }}
        </view>
      </view>
    </u-popup>

    <!-- 刷新提示 -->
    <view class="refresh-tip" v-if="showRefreshTip">
      <u-icon name="reload" size="16" color="#f4c242" />
      <text>数据已更新</text>
    </view>
  </view>
</template>

<script>
import { currencyData, currencyEnumIconUrl } from '../../data/currency.js'
import PriceChart from '../../components/price-chart/price-chart.vue'

export default {
  components: {
    PriceChart
  },
  data() {
    return {
      currencies: [],
      currencyEnumIconUrl,
      currentTimeFilter: 0,
      showDetailPopup: false,
      selectedCurrency: null,
      showRefreshTip: false,
      pinnedCurrencies: [], // 置顶通货列表
      timeFilterTabs: [
        { key: 'today', name: '今日' },
        { key: '3days', name: '3天' },
        { key: '7days', name: '7天' }
      ]
    }
  },

  computed: {
    // 通货列表（置顶优先，然后按价格排序）
    filteredCurrencies() {
      // 先复制数组避免修改原数组
      const currencies = [...this.currencies]
      
      // 置顶通货在前，其他通货按价格降序排序
      return currencies.sort((a, b) => {
        // 置顶优先
        if (a.isPinned && !b.isPinned) return -1
        if (!a.isPinned && b.isPinned) return 1
        
        // 置顶通货按置顶时间排序（后置顶的在前）
        if (a.isPinned && b.isPinned) {
          return b.pinTime - a.pinTime
        }
        
        // 非置顶通货按价格降序排序
        return b.todayPrice[0].yuan2count - a.todayPrice[0].yuan2count
      })
    }
  },

  onLoad() {
    this.loadCurrencyData()
    this.loadPinnedCurrencies()
  },

  // 下拉刷新
  async onPullDownRefresh() {
    // 重新加载数据并刷新
    await this.loadCurrencyData()
    await this.refreshData()
    uni.stopPullDownRefresh()
  },

  methods: {
    // 获取YYYY-MM-DD格式的日期
    getDateString(date) {
      const year = date.getFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    // 获取前一天日期
    getYesterdayDateString(date) {
      const yesterday = new Date(date)
      yesterday.setDate(yesterday.getDate() - 1)
      return this.getDateString(yesterday)
    },
    // 加载通货数据
    async loadCurrencyData() {
      // 直接使用本地数据
      wx.request({
        url: 'https://gitee.com/Eplayer/database/raw/master/datatype.json',
        success: (res) => {
          console.log('加载类型数据成功：', res.data)
          const datatype = res.data
          wx.request({
            url: 'https://gitee.com/Eplayer/database/raw/master/prices.json',
            success: (resp) => {
              console.log('加载通货数据成功：', resp.data)
              const prices = resp.data
              const currencies = []
              
              // 合并数据，构建currencies数组
              datatype.forEach(currencyType => {
                const priceData = prices.find(p => p._id === currencyType._id)
                console.log('priceData',priceData)
                if (priceData) {
                  const currency = { ...currencyType }
                  
                  // 获取今天和昨天的价格数据
                  const today = this.getDateString(new Date())// 当前日期
                  console.log('today',today)
                  const yesterday = this.getYesterdayDateString(new Date()) // 昨天日期
                  
                  // 构建todayPrice和prePrice数组
                  currency.todayPrice = []
                  currency.prePrice = []
                  
                  // 处理每个站点的数据
                  priceData.station.forEach(station => {
                    // 查找今天的数据
                    const todayData = station.history.find(h => h.date === today)
                    // 查找昨天的数据
                    const yesterdayData = station.history.find(h => h.date === yesterday)
                    
                    // 构建todayPrice
                    if (todayData) {
                      currency.todayPrice.push({
                        stationName: station.code,
                        yuan2count: todayData.yuan2count,
                        count2yuan: todayData.count2yuan
                      })
                    } else {
                      // 如果没有今天数据，使用最新数据或默认值
                      const latestData = station.history[0]
                      currency.todayPrice.push({
                        stationName: station.code,
                        yuan2count: latestData.yuan2count,
                        count2yuan: latestData.count2yuan
                      })
                    }
                    
                    // 构建prePrice
                    if (yesterdayData) {
                      currency.prePrice.push({
                        stationName: station.code,
                        yuan2count: yesterdayData.yuan2count,
                        count2yuan: yesterdayData.count2yuan
                      })
                    } else {
                      // 如果没有昨天数据，使用今天数据或默认值
                      const todayData = station.history.find(h => h.date === today) || station.history[0]
                      currency.prePrice.push({
                        stationName: station.code,
                        yuan2count: todayData.yuan2count,
                        count2yuan: todayData.count2yuan
                      })
                    }
                  })
                  
                  currencies.push(currency)
                }
              })
              
              console.log('构建的currencies数组：', currencies)
              this.currencies = currencies
              this.initPinStatus()
            }
          })
        }
      })
    },

    // 时间筛选切换
    handleTimeFilterChange(index) {
      this.currentTimeFilter = index
      this.updatePriceDataByTimeFilter()
    },

    // 显示通货详情
    showCurrencyDetail(currency) {
      this.selectedCurrency = currency
      this.showDetailPopup = true
    },

    // 格式化价格显示
    formatPrice(price) {
      if (price >= 1000) {
        return (price / 1000).toFixed(1) + 'K'
      } else if (price >= 1) {
        return price.toFixed(1)
      } else if (price >= 0.1) {
        return price.toFixed(2)
      } else {
        return price.toFixed(3)
      }
    },

    // 获取稀有度类名
    getRarityClass(price) {
      if (price >= 100) {
        return 'rarity-legendary'
      } else if (price >= 10) {
        return 'rarity-rare'
      } else if (price >= 1) {
        return 'rarity-uncommon'
      } else {
        return 'rarity-common'
      }
    },

    // 获取稀有度文本
    getRarityText(price) {
      if (price >= 100) {
        return '传奇'
      } else if (price >= 10) {
        return '稀有'
      } else if (price >= 1) {
        return '不常见'
      } else {
        return '常见'
      }
    },

    // 获取推荐操作
    getRecommendation(currency) {
      const { price } = currency

      if (price.trend === 'up' && price.change_percent > 10) {
        return '建议出售'
      } else if (price.trend === 'down' && price.change_percent < -10) {
        return '建议买入'
      } else if (price.trend === 'up' && price.change_percent > 5) {
        return '可考虑出售'
      } else if (price.trend === 'down' && price.change_percent < -5) {
        return '可考虑买入'
      } else {
        return '持有观望'
      }
    },

    // 获取推荐操作类名
    getRecommendationClass(currency) {
      const action = this.getRecommendation(currency)
      if (action.includes('买入')) {
        return 'rec-buy'
      } else if (action.includes('出售')) {
        return 'rec-sell'
      } else {
        return 'rec-hold'
      }
    },

    // 格式化更新时间
    formatUpdateTime(timestamp) {
      const date = new Date(timestamp)
      const now = new Date()
      const diff = now - date

      if (diff < 60000) {
        // 1分钟内
        return '刚刚更新'
      } else if (diff < 3600000) {
        // 1小时内
        return `${Math.floor(diff / 60000)}分钟前`
      } else {
        const hours = date.getHours().toString().padStart(2, '0')
        const minutes = date.getMinutes().toString().padStart(2, '0')
        return `今日 ${hours}:${minutes}`
      }
    },

    // 计算价格变化百分比
    getPriceChangePercent(currency, stationIndex) {
      if (!currency.prePrice || !currency.prePrice[stationIndex]) {
        return 0
      }

      const todayPrice = currency.todayPrice[stationIndex].count2yuan
      const prePrice = currency.prePrice[stationIndex].count2yuan

      if (prePrice === 0) {
        return 0
      }

      const changePercent = ((todayPrice - prePrice) / prePrice) * 100
      return changePercent.toFixed(2)
    },

    // 获取价格趋势
    getPriceTrend(currency, stationIndex) {
      const changePercent = this.getPriceChangePercent(currency, stationIndex)
      if (changePercent > 2) {
        return 'up'
      } else if (changePercent < -2) {
        return 'down'
      } else {
        return 'stable'
      }
    },

    // 图片加载失败处理
    handleImageError(e) {
      console.log('图片加载失败:', e)
      // 使用base64编码的透明占位图
      e.target.src =
        ''
    },

    // 根据时间筛选更新价格数据
    updatePriceDataByTimeFilter() {
      const timeFilter = this.timeFilterTabs[this.currentTimeFilter].key

      this.currencies.forEach(currency => {
        if (currency.history && currency.history[timeFilter]) {
          const historyData = currency.history[timeFilter]
          const currentPrice = currency.todayPrice[0].yuan2count

          // 计算指定时间段内的价格变化
          if (historyData.length > 0) {
            const firstPrice = historyData[0].price
            const changePercent = ((currentPrice - firstPrice) / firstPrice) * 100
            // 这里可以更新到todayPrice中的某个字段，暂时不处理
          }
        }
      })
    },

    // 刷新数据
    refreshData() {
      return new Promise(resolve => {
        // 确保currencies数组不为空
        if (!this.currencies || this.currencies.length === 0) {
          this.loadCurrencyData()
        }

        // 模拟价格波动 - 暂时不处理，因为数据结构已改变
        // 显示刷新提示
        this.showRefreshTip = true
        setTimeout(() => {
          this.showRefreshTip = false
        }, 2000)

        resolve()
      })
    },

    // 加载置顶通货列表
    loadPinnedCurrencies() {
      try {
        const pinnedList = uni.getStorageSync('pinnedCurrencies') || []
        this.pinnedCurrencies = pinnedList
        console.log('加载置顶列表:', pinnedList)
        // 初始化置顶状态
        this.initPinStatus()
      } catch (error) {
        console.error('加载置顶列表失败:', error)
      }
    },

    // 保存置顶通货列表到本地缓存
    savePinnedCurrencies() {
      try {
        uni.setStorageSync('pinnedCurrencies', this.pinnedCurrencies)
        console.log('保存置顶列表:', this.pinnedCurrencies)
      } catch (error) {
        console.error('保存置顶列表失败:', error)
      }
    },

    // 切换置顶状态
    togglePinCurrency(currency) {
      const isCurrentlyPinned = currency.isPinned
      
      if (isCurrentlyPinned) {
        // 取消置顶
        this.unpinCurrency(currency)
      } else {
        // 置顶
        this.pinCurrency(currency)
      }
    },

    // 置顶通货
    pinCurrency(currency) {
      // 检查是否已达到最大置顶数量
      if (this.pinnedCurrencies.length >= 5) {
        uni.showToast({
          title: '最多只能置顶5个通货',
          icon: 'none',
          duration: 2000
        })
        return
      }

      // 设置置顶状态
      currency.isPinned = true
      currency.pinTime = Date.now()
      
      // 添加到置顶列表
      this.pinnedCurrencies.push(currency._id)
      
      // 保存到本地缓存
      this.savePinnedCurrencies()
      
      uni.showToast({
        title: '置顶成功',
        icon: 'success',
        duration: 1000
      })
    },

    // 取消置顶
    unpinCurrency(currency) {
      // 取消置顶状态
      currency.isPinned = false
      delete currency.pinTime
      
      // 从置顶列表中移除
      const index = this.pinnedCurrencies.indexOf(currency._id)
      if (index > -1) {
        this.pinnedCurrencies.splice(index, 1)
      }
      
      // 保存到本地缓存
      this.savePinnedCurrencies()
      
      uni.showToast({
        title: '取消置顶',
        icon: 'success',
        duration: 1000
      })
    },

    // 初始化置顶状态
    initPinStatus() {
      this.currencies.forEach(currency => {
        currency.isPinned = this.pinnedCurrencies.includes(currency._id)
        if (currency.isPinned) {
          currency.pinTime = Date.now() // 设置默认置顶时间
        }
      })
    },
    
    // 格式化日期显示
    getDateString(date) {
      const year = date.getFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      return `${year}-${month}-${day}`
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #f5f6fa;
  min-height: 100vh;
  padding-bottom: 20rpx;
}

/* 数据更新日期样式 */
.update-date-section {
  margin-bottom: 20rpx;
}

.update-date-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20rpx;
  padding: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.3);
  color: white;
}

.update-date-text {
  font-size: 28rpx;
  font-weight: bold;
  margin-left: 15rpx;
}

.container {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
  padding: 30rpx;
}

/* 通货列表：单列布局 */
.currency-list-single {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

/* 单个通货卡片 */
.currency-card {
  background: white;
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.12);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);

  &:active {
    transform: translateY(2rpx) scale(0.995);
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
  }
}

/* 通货标题行 */
.currency-header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
  position: relative;
}

/* 通货图标 */
.currency-icon {
  width: 88rpx;
  height: 88rpx;
  margin-right: 24rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

.currency-card:active .currency-icon {
  transform: scale(0.95);
}

/* 通货名称 */
.currency-name {
  font-size: 36rpx;
  font-weight: 700;
  color: #2c3e50;
  flex: 1;
  letter-spacing: 0.5rpx;
}

/* 置顶按钮 */
.pin-button {
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 4rpx 16rpx rgba(244, 194, 66, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  &:active {
    transform: scale(0.85);
    box-shadow: 0 2rpx 8rpx rgba(244, 194, 66, 0.4);
  }
}

/* 价格变化标签 */
.price-change-tag {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  padding: 6rpx 12rpx;
  border-radius: 8rpx;

  &.up {
    background: rgba(76, 175, 80, 0.1);
    color: #4caf50;
  }

  &.down {
    background: rgba(244, 67, 54, 0.1);
    color: #f44336;
  }

  &.stable {
    background: rgba(158, 158, 158, 0.1);
    color: #9e9e9e;
  }
}

.change-icon {
  margin-right: 4rpx;
  font-size: 22rpx;
}

.change-percent {
  font-weight: bold;
}

/* 价格表格 */
.price-table {
  border-radius: 16rpx;
  overflow: hidden;
  background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
}

/* 表格行 */
.table-header,
.table-row {
  display: flex;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);

  &:last-child {
    border-bottom: none;
  }
}

/* 表格单元格 */
.table-cell {
  flex: 1;
  padding: 24rpx 16rpx;
  text-align: center;
  font-size: 28rpx;
  font-weight: 500;
  color: #4a5568;

  &:first-child {
    border-right: 1px solid rgba(226, 232, 240, 0.8);
    font-weight: 600;
    color: #2d3748;
  }

  &:nth-child(2) {
    border-right: 1px solid rgba(226, 232, 240, 0.8);
  }
}

/* 表头样式 */
.table-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-weight: 600;
  color: white;
  
  .table-cell {
    color: white;
    font-weight: 600;
    
    &:first-child {
      color: white;
    }
  }
}

/* 数据行样式 */
.table-row {
  background: white;
  transition: background-color 0.2s ease;

  &:nth-child(even) {
    background: #f7fafc;
  }

  &:hover {
    background: #edf2f7;
  }
}

.trend-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: bold;

  &.up {
    background: rgba(245, 108, 108, 0.1);
    color: #f56c6c;
  }

  &.down {
    background: rgba(103, 194, 58, 0.1);
    color: #67c23a;
  }

  &.stable {
    background: rgba(144, 147, 153, 0.1);
    color: #909399;
  }
}

.price-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}

.price-main {
  display: flex;
  align-items: baseline;
  flex: 1;
}

.price-label {
  font-size: 28rpx;
  color: #606266;
}

.price-value {
  font-size: 40rpx;
  font-weight: bold;
  color: #303133;
  margin: 0 8rpx;
}

.price-unit {
  font-size: 28rpx;
  color: #606266;
}

.price-change {
  font-size: 28rpx;
  font-weight: bold;
  padding: 10rpx 20rpx;
  margin-top: 20rpx;
  border-radius: 25rpx;

  &.up {
    background: rgba(245, 108, 108, 0.1);
    color: #f56c6c;
  }

  &.down {
    background: rgba(103, 194, 58, 0.1);
    color: #67c23a;
  }

  &.stable {
    background: rgba(144, 147, 153, 0.1);
    color: #909399;
  }
}

.recommendation {
  display: flex;
  align-items: center;
}

.rec-label {
  font-size: 24rpx;
  color: #909399;
  margin-right: 10rpx;
}

.rec-action {
  font-size: 26rpx;
  font-weight: bold;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;

  &.rec-buy {
    background: rgba(103, 194, 58, 0.1);
    color: #67c23a;
  }

  &.rec-sell {
    background: rgba(245, 108, 108, 0.1);
    color: #f56c6c;
  }

  &.rec-hold {
    background: rgba(144, 147, 153, 0.1);
    color: #909399;
  }
}

// 详情弹窗样式
.detail-popup {
  padding: 40rpx;
}

.detail-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.detail-icon {
  width: 100rpx;
  height: 100rpx;
  margin-right: 20rpx;
}

.detail-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5rpx;
}

.detail-id {
  font-size: 26rpx;
  color: #909399;
}

.detail-price {
  text-align: center;
  padding: 30rpx 0;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 30rpx;
}

.detail-price-main {
  font-size: 40rpx;
  font-weight: bold;
  color: #303133;
  margin-bottom: 10rpx;
}

.detail-price-change {
  font-size: 28rpx;
  font-weight: bold;

  &.up {
    color: #f56c6c;
  }
  &.down {
    color: #67c23a;
  }
  &.stable {
    color: #909399;
  }
}

.detail-desc-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #303133;
  margin-bottom: 20rpx;
}

.detail-desc-content {
  font-size: 28rpx;
  line-height: 1.6;
  color: #606266;
  white-space: pre-line;
}

.detail-time {
  text-align: center;
  font-size: 24rpx;
  color: #909399;
  margin-top: 30rpx;
}

// 刷新提示
.refresh-tip {
  position: fixed;
  top: 100rpx;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 20rpx 30rpx;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  font-size: 26rpx;
  z-index: 999;

  text {
    margin-left: 10rpx;
  }
}
</style>
